<template>
  <div>
    <div class="conditionContent">
      <div class="one-search-condition">
        <span class="red-dot">*</span>
        <div class="one-title">姓名：</div>
        <div>
          <el-input
            v-model="paramsObj.keyWord"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <el-button class="add-btn" type="primary" @click="clickAddBtn"
        >新增</el-button
      >
      <el-button class="search-btn" type="primary">查询</el-button>
    </div>
    <div ref="tableContent">
      <el-table
        tooltip-effect="dark"
        :height="tableHeight"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="(col, idx) in columns"
          :key="idx"
          :prop="col.prop"
          :label="col.label"
          :sortable="col.sortable"
          :formatter="col.formatter"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          :formatter="doFormatter"
        >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
        background
        :small="false"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <addEditDialog :status.sync="dialogStatus" />
  </div>
</template>

<script>
import addEditDialog from "@/views/modules/xxl-demo-example/el-table/components/add-edit-dialog.vue";

export default {
  data() {
    return {
      dialogStatus: false,
      pageSize: 100,
      total: 1000,
      currentPage: 1,
      columns: [
        {
          label: "序号",
          prop: "num",
          sortable: true,
        },
        {
          label: "日期",
          prop: "date",
        },
        {
          label: "名字",
          prop: "name",
        },
        {
          label: "班级",
          prop: "classes",
        },
        {
          label: "性别",
          prop: "sex",
        },
        {
          label: "地址",
          prop: "address",
        },
      ],
      tableData: [],
      paramsObj: {
        keyWord: "",
      },
      tableHeight: 200,
      multipleSelection: [],
    };
  },
  components: {
    addEditDialog,
  },
  mounted() {
    this.tableSizeChange();
    this.getTableData();
    window.addEventListener("resize", this.tableSizeChange);
  },
  destroyed() {
    window.removeEventListener("resize", this.tableSizeChange);
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // this.$refs.multipleTable.toggleRowSelection(row);
      // this.$refs.multipleTable.clearSelection();
    },
    deleteRow(idx, tData) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    clickAddBtn() {
      this.dialogStatus = true;
    },
    doFormatter(row, column) {
      return "新增";
    },
    getTableData() {
      let reslut = [];
      for (let i = 0; i < 100; i++) {
        reslut.push({
          date: `2016-05-0${i}`,
          name: `王小虎${i}`,
          address: "上海市普陀区金沙江路 1518 弄",
          num: `${i}`,
          sex: "男",
          classes: "二年级",
        });
      }
      this.tableData = reslut;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    tableSizeChange() {
      setTimeout(() => {
        let refContent = this.$refs.tableContent;
        let { top } = refContent.getBoundingClientRect();
        //表格的高度 = 视口高度-top
        this.tableHeight = document.documentElement.clientHeight - 88 - top;
      }, 50);
    },
  },
};
</script>
<style lang="scss" scoped>
.conditionContent {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  .search-btn {
    margin-left: 16px;
  }
  .add-btn {
    margin-left: 16px;
  }
}
.one-search-condition {
  display: flex;
  align-items: center;
  .red-dot {
    color: red;
    margin-top: 6px;
    margin-right: 4px;
  }
  .one-title {
  }
}
</style>
